<template>
	<view class="page">
	<view class="content">
		<uni-swiper-dot :info="topimg" :current="current" field="content" :dots-styles="dotsStyles" :mode="mode">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item ,index) in topimg" :key="index">
					<view class="swiper-item">
						<image class="logo" :src="item.imgurl"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="otherleft">
			<!-- <image src="/static/main/zdh.png" class="zdh"></image> -->
			<image :src="`${store.state.baseImgUrl}static/main/zdhtop.png`" class="zdhtop" @click="toguide"></image>
			<image :src="`${store.state.baseImgUrl}static/main/zdhbottom.png`" class="zdhbottom" @click="totree"></image>
		</view>
		<view class="otherbottom">
			<image :src="`${store.state.baseImgUrl}static/main/dlwz.png`" class="dlwz"></image>
			<image :src="`${store.state.baseImgUrl}static/main/szcyg.png`" class="szcyg"></image>
			<image :src="`${store.state.baseImgUrl}static/main/topdy.png`" class="topdy"></image>
		</view>
	</view>
	<view class="content2">
		<image :src="`${store.state.baseImgUrl}static/main/top_docimg.png`" class="border_top"></image>
		<text class="top_text">国家法定假日免费  开放时间:8:00 - 17:30</text>
	</view>
	<view class="content3">
		<image :src="`${store.state.baseImgUrl}static/indexpage/content_img.png`" class="content_img"></image>
		<view class="font_class font_class1 "  @click="toknowNew">
			<text class="title">重阳知新事</text>
			<text class="title_a">NEW EVENTS</text>
		</view>
		<view class="font_class font_class2" @click="toTaoistpa">
			<text class="title">重阳宫文化</text>
			<text class="title_a">NEW EVENTS</text>
		</view>
		<view class="font_class font_class3"  @click="toTaoistpl">
			<text class="title">重阳光影</text>
			<text class="title_a">SIGHT</text>
		</view>
		<view class="font_class font_class4" @click="toTaoisttr">
			<text class="title">增修福慧</text>
			<text class="title_a"> CULTIVATE WISDOM</text>
		</view>
		<view class="font_class font_class5" @click="toimpression">
			<text class="title">广积功德</text>
			<text class="title_a">ACCUMULATE MENT WIDELY</text>
		</view>
		
	</view>
	<view class="content4">
			<image :src="`${store.state.baseImgUrl}static/main/bottom_docimg.png`" class="border_bottom"></image>
			<text class="bottom_text">中国•西安•大重阳万寿宫 V 1.1.1版</text>
	</view>
	</view>
</template>

<script setup>
	import {
		ref,reactive
	} from 'vue';
	import {useStore} from 'vuex';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	const store = useStore()
	console.log(store.state.baseImgUrl)
	const topimg=ref([
		{imgurl:`${store.state.baseImgUrl}static/indexpage/index_top1.png`},
		{imgurl:`${store.state.baseImgUrl}static/indexpage/index_top2.png`},
	])
	const mode=ref("dot")
	const dotsStyles=reactive({
						backgroundColor: 'rgba(255, 90, 95,0.3)',
						border: '1px rgba(255, 90, 95,0.3) solid',
						bottom:"30px",
						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
					})
	const current=ref(0)
	const toknowNew=()=>{
		uni.navigateTo({
			url: '/pages/knowNew/index/index'
		});
	}
	const toTaoistpa=()=>{
		uni.navigateTo({
			url: '/pages/Taoist/palace'
		});
	}
	const toTaoistpl=()=>{
		uni.navigateTo({
			url: '/pages/Taoist/plaque'
		});
	}
	const toTaoisttr=()=>{
		uni.navigateTo({
			url: '/pages/Taoist/treasure'
		});
	}
	const toguide=()=>{
		uni.navigateTo({
			url: '/pages/Taoist/guide'
		});
	}
	const totree=()=>{
		uni.navigateTo({
			url: '/pages/Taoist/treelandscape'
		});
	}
	const toimpression=()=>{
		uni.navigateTo({
			url: '/pages/Taoist/impressioncyg'
		});
	}
</script>

<style scoped lang="less">
	.page {
		min-height: 100vh;
		background: #5e0e03;
		position: relative;
		padding-bottom: 50rpx;
		.content{
			position: relative;
		.otherleft{
			position: absolute;
			top: 440rpx;
			left: 20rpx;
			// border: 1px solid #333333;
			z-index: 999;
			width: 200rpx;
			height: 300rpx;
			// background: #8f8f94;
				
			.zdhtop{
				width: 90rpx;
				height: 140rpx;
				display: block;
			}
			.zdhbottom{
				margin-top: 10rpx;
				width: 80rpx;
				height: 140rpx;
				display: block;
			}
		}
		.otherbottom{
			position: absolute;
			top:720rpx;
			// border: 1px solid #333333;
			z-index: 999;
			width: 100%;
			height: 200rpx;
			text-align: center;
			// background: #8f8f94;
			.dlwz{
				position: absolute;
				right: 10rpx;
				width: 126rpx;
				height: 72rpx;
			}
			.szcyg{
				height: 100rpx;
				width: 380rpx;
				position: relative;
				top:-60rpx;
			}
			.topdy{
				position: absolute;
				width: 280rpx;
				height: 160rpx;
				left: 50%;
				transform: translateX(-140rpx);
				top:-60rpx;
			}
		}
		.swiper-box{
			height: 700rpx;
			z-index: 1;
		}
		.logo {
			height: 700rpx;
			width: 100%;
		
		}
		
		.text-area {
			display: flex;
			justify-content: center;
		}
		
		.title {
			font-size: 36rpx;
			color: #8f8f94;
		}
		.example-body-dots {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50px;
				background-color: #333333;
				margin-left: 10rpx;
			}
		}
		.content2{
			padding: 10rpx 5%;
			height: 60rpx;
			position: relative;
			top:100rpx;
			// background:url('/static/main/top_docimg.png');
			// background-repeat: no-repeat;
			// background-size: cover;
			// background-position: center;
			.border_top{
				position: absolute;
				height: 50rpx;
				width: 90%;
				margin-top: 15rpx;
			}
			.top_text{
				position: absolute;
				color:#fff;
				font-size: 24rpx;
				margin-left: 60rpx;
				
			}
		}
		.content3{
			// margin: 0 5%;
			// width: 90%;
			// height: 600rpx;
			position: relative;
			// background:url('/static/indexpage/content_img.png');
			// background-repeat: no-repeat;
			// background-size: contain;
			// background-position: center;
			z-index: 99;
			.content_img{
				position: relative;
				top: 100rpx;
				margin: 0 5%;
				width: 90%;
				height: 600rpx;
			}
			.font_class{
				position: absolute;
				color: #fff;
				width: 50%;
				z-index: 101;
				text-align: center;
				.title,.title_a{
					display: block;
				}
				.title{
					font-size: 32rpx;
				}
				.title_a{
					font-size: 18rpx;
					margin-top: 5rpx;
				}
			}
			.font_class1{
				top: 180rpx;
				left: -20rpx;
			}
			.font_class2{
				top: 180rpx;
				right: -20rpx;
			}
			.font_class3{
				top: 410rpx;
			}
			.font_class4{
				top: 410rpx;
				right: 0rpx;
			}
			.font_class5{
				top: 610rpx;
				width: 100%;
				color: #ffdf20;
			}
		}
		.content4{
			height: 150rpx;
			position: relative;
			// top: 100rpx;
			margin-bottom: 0rpx;
			.border_bottom{
				position: absolute;
				height: 50rpx;
				width: 100%;
				margin-top: 55rpx;
			}
			.bottom_text{
				color:#fff;
				font-size: 24rpx;
				display: block;
				margin-top: 115rpx;
				text-align: center;
			}
		}
	}
	
	
</style>
